<template>
    <div class="main">
      <div class="logo">
        <img src="../../img/logo.png" alt="">
      </div>
      <div class="infor">
        <form action="">
          <label for="">
            <img src="../../img/register-1.png" alt="">
            <input type="text" placeholder="请输入姓名" class="name" v-model="name">
          </label>
          <label for="">
            <img src="../../img/register-3.png" alt="">
            <input type="tel" placeholder="请输入手机号" v-model="phone">
          </label>
          <label for="">
            <img src="../../img/register-2.png" alt="">
            <!--<com-calendar :style="calendar" :startTime="start" :endTime="end"   v-on:date="getDate()"></com-calendar>-->
          </label>
          <label for="">
            <img src="../../img/register-2.png" alt="">
            <input type="text" placeholder="请输入验证码" class="code" v-model="code">
            <input @click="sendCode()" class="divcode" value="获取验证码">
          </label>
        </form>
      </div>
      <a href="#" @click="bind()">注册</a>
      <div class="prop1" v-if="prop==1">
        <div class="propcon">
          <p>恭喜注册成功~!</p>
          <a @click="goBack()">马上开始</a>
        </div>
      </div>
      <div class="prop2" v-if="prop==2">
        <div class="propcon">
          <p>{{message}}</p>
          <a @click="go()">我要绑定</a>
        </div>
      </div>
      <div class="prop2" v-if="prop==3">
        <div class="propcon">
          <p>{{message}}</p>
          <a @click="closebtn()">好的</a>
        </div>
      </div>
    </div>
</template>

<script>
  import $ from "jQuery";
  import {
    baseUrl,myUrl,
  } from "@/assets/public";
  export default {
    name: 'main',
    data() {
      return {
        data:"",
        phone:"",
        name:'',
//        date:"",
        openid:"",
        code:"",
        prop:0,
        message:"",
        returnUrl:"",
      }
    },
    created(){
    },
    mounted() {
      //获取链接中的openid
      this.openid=localStorage.openid;
      //获取回跳路由
      this.returnUrl=this.$route.query.returnUrl;
    },
    methods: {
      //获取验证码
      sendCode(){
        var code =$(".code").val();
        var divcode =$(".divcode");
        var num = 60;
        if(num == 0){
          divcode.remove("disabled");
          divcode.val("获取验证码");
          num = 60;
        }else {
          divcode.attr("disabled",true);
          divcode.val("重新发送(" + num + ")");
          num--;
         var time = setInterval(function() {
           if(num ==0) {
             divcode.removeAttr("disabled");
             divcode.val("获取验证码");
             num = 60;
             clearInterval(time);
           }else {
             divcode.attr("disabled",true);
             divcode.val("重新发送(" + num + ")");
             num--;
           }
          }, 1000)
        }
        var that =this;
        console.log(this.phone);
        $.ajax({
          url:baseUrl+"/api/sendCode",
          type:"POST",
          dataType:"json",
          data:{
            phone:that.phone,
          },
          success:function (res) {
            if(res.status == 200){
              that.prop=3;
              that.message='验证码发送成功';
            }else {
              that.prop=3;
              that.message=res.message;
            }
          }
        })
      },
      //请求本系统注册接口
      bind(){
        var that =this;
        $.ajax({
          url:baseUrl+"/api/register",
          type:"POST",
          dataType:"json",
          data:{
            phone:that.phone,
            name:that.name,
//            dateofBirth:that.birth,
            code:that.code,
            openid:localStorage.openid,
            access_token:localStorage.access_token,
            randstr:localStorage.randstr,
          },
          success:function (res) {
            if(res.status==200){
              that.prop=1;
//            that.$router.push("/");
            }else if(res.status==-222){
              that.prop=2;
              that.message=res.message;
            }else{
              that.prop=3;
              that.message=res.message;
            }
          }
        })
      },
      //跳往美丽田园指定绑定页面
      go(){
        this.bang_url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7302aaa9857c055b&redirect_uri=http://bfwechat.beautyfarm.com.cn/wechat/member/Index.aspx?Source="+encodeURIComponent(myUrl)+"&ToUserName=gh_a0db7a77b670&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
        window.location.href=this.bang_url;
      },
      //完成注册后,跳转回之前页面
      goBack(){
        window.location.href=this.returnUrl;
      },
      //关闭弹框
      closebtn(){
        this.prop=0;
      }
    }
  }
</script>

<style scoped>
  .main {
    width: 100%;
    height:100vh;
    background: #f7f7f7;
  }
  .main .logo {
    width: 100%;
    height:6rem;
    display: flex;
    align-items:center;
    justify-content: center;
  }
  .infor {
    width: 80%;
    height:auto;
    padding:0 10%;
  }
  .infor label {
    width: 100%;
    height:1rem;
    position: relative;
  }
  .infor label img {
    position: absolute;
    top:-0.1rem;
    left:.4rem;
  }
  .infor label input {
    width: 100%;
    outline:none;
    height:1rem;
    margin-top:.3rem;
    border:1px solid #999999;
    font-size:.4rem;
    text-indent:1.2rem;
    color: #999999;
  }
  .main>a {
    display: block;
    width: 60%;
    height:1.5rem;
    margin:0 auto;
    background: #333;
    color: #ffffff;
    font-size:.4rem;
    letter-spacing: 20px;
    position: relative;
    margin-top:1rem;
    text-align: center;
    line-height:1.5rem;
  }
  label .divcode {
    width: 2.3rem !important;
    height:.6rem !important;
    line-height:.6rem !important;
    text-align: center !important;
    position: absolute !important;
    top:-.18rem !important;
    left:65% !important;
    font-size:.34rem !important;
    background: #333 !important;
    color: #ffffff !important;
    text-indent:0 !important;
    margin-top:0 !important;
  }
  input[type="date"] {
    text-align: left !important;
  }


  .prop1 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop1 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop2.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
    overflow: hidden;
  }
  .prop1 .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.4rem;
    line-height:.5rem;
    color: #333333;
    margin-top:5.2rem;
  }
  .prop1 .propcon a {
    display: block;
    width: 2.4rem;
    height:1rem;
    line-height:1rem;
    text-align: center;
    font-size:.4rem;
    border:1px solid #333333;
    margin:0 auto;
    color: #666666;
  }



  .prop2 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop2 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop2.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
    overflow: hidden;
  }
  .prop2 .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.4rem;
    line-height:.5rem;
    color: #333333;
    margin-top:5.2rem;
    padding:0 25%;
  }
  .prop2 .propcon a {
    display: block;
    width: 2.4rem;
    height:1rem;
    line-height:1rem;
    text-align: center;
    font-size:.4rem;
    border:1px solid #333333;
    margin:0 auto;
    color: #666666;
  }
</style>
